<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
        <meta name="author" content="order by dede58.com"/>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>付款</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
		
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script src="js/head.js"></script>
		
	</head>
	
	<script type="text/javascript">
		$(function(){
			let orderNo1 = ${param.orderNo1}+"";
			let orderNo2 = ${param.orderNo2}+"";
			let orderNo = orderNo1+orderNo2;
			$("#orderNo").text("订单号："+orderNo);
			/* 将订单号存入隐藏域 */
			$("#WIDout_trade_no").val(orderNo);
			$("#orderNo1").val(orderNo1);
			$("#orderNo2").val(orderNo2);
			// 根据订单号查询订单信息
			let gamesId = ${empty param.gamesId} ? "0" : "${param.gamesId}";
			let gamesIdString = ${empty param.gamesIdArray} ? "0" : "${param.gamesIdArray}";
			let sum = ${empty param.sum} ? "0" : "${param.sum}";
			let array = new Array();
			
			
			
			if(gamesId!="0"){
				$.ajax({
					async:true,
					type:"GET",
					url:"../GamesServlet",
					data:{
						op:"find",
						gamesId:gamesId
					},
					contentType:"application/x-www-form-urlencoded",
					dataType:"json",
					success:function(result,status,xhr){
						$("#needToPay").text(result.data.price);
						/* 将游戏价格存入隐藏域 */
						$("#WIDtotal_amount").val(result.data.price);
					},
				});
			}else if(sum!="0"&&gamesIdString.length!=0) {
				$("#needToPay").text(sum);
				/* 将游戏价格存入隐藏域 */
				$("#WIDtotal_amount").val(sum);
			}
			
			
			
			
			
			
			/* 创建一个查询方法通过游戏编号查询游戏信息添加入购物车*/
			function s(){
				$.ajax({
					async:true,
					type:"GET",
					url:"../OrderServlet",
					data:{
						op:"find",
						orderNo:"0",
						customerId:${sessionScope.customer.customerId}
					},
					contentType:"application/x-www-form-urlencoded",
					dataType:"json",
					success:function(result,status,xhr){
						let count = 0;
						$.each(result.data,function(index,games){
							count = index + 1;
						});
						$("#shopCount").text("购物车（"+count+"）");
						
					},
					
				});	
			}
			/* 调用方法通过游戏编号查询游戏信息添加入购物车*/
			s();
		});
		</script>
	
	
	
	<script>
		$(function(){
			let nickname = "${sessionScope.customer.nickname}";
			let content = "";
			if(nickname!=""){
				content = "<span class=\"fl\">欢迎</span>"+
						"<a href=\"grxx.jsp\" class=\"fl\">"+nickname+"</a>"+
						"<span class=\"fl\">进入商城</span>"+
						"<a href=\"../LoginServlet?op=customerLogout\" class=\"fl\">退出登陆</a>";
			}else{
				content = "<span class=\"fl\">您好，请</span>"+
						"<a href=\"sign.jsp\" class=\"fl\">登录</a>";
			}
			$("#customerInfo").html(content);
		});
			
	</script>
	<body>
		
		<!--Main-wrap-->
		<div class="main-wrap graybg" id="cen" style="margin-top: 86px;">
			<div class="wrapper pt40 pb40">
				<div class="order-detail-box white-box clearfix">
					<p class="fl icon"> <i class="iconfont">&#xe613;</i></p>
					<div class="fr order-info">
						<div class="line-bot pt20 pb20 clearfix">
							<p class="fl l-suc-info">
								<span class="full-db fs26 darkgray">订单提交成功，应付金额  <em class="orange" id="needToPay">0</em> 元</span>
								<span class="full-db fs14 lh30">请您在&nbsp<span id="time" style="color:red;font-size:20px;">30s</span>&nbsp内完成支付，支付成功后立即发送至您的游戏仓库，否则订单会被自动取消</span>
							</p>
							<p class="fr r-suc-info tr">
								<span class="full-db fs14 lh30" id="orderNo">订单号：</span>
								<span class="full-db fs14 lh30"><a href="javascript:" class="detail-show" id="xq">订单详情<i class="icon"></i></a></span>
							</p>
						</div>
						<div class="order-show pt10">
							<span class="full-db fs14 lh30 darkgray"></span>
							<span class="full-db fs14 lh30 darkgray">商品信息     墙角数枝梅，凌寒独自开  X 1</span>
						</div>
					</div>
				</div>
				<div class="pay-order-style white-box mt20">
					<div class="title line-bot">
						<span class="fs18 darkgray ml40 pl10">选择以下支付方式付款</span>
					</div>
					<div class="pay-cont">
						<form action="">
							<div class="re_charge line-bot pb30 pt30 clearfix xz">
								<label class="fl fs16 darkgray pt20">账户余额支付</label>
								<a href="javascript:" class="fl check-inline ml10"><span class="fs16 orange">余额：2000.00元</span><em></em></a>
							</div>
							<div class="pay-style line-bot pb30 pt30 clearfix xz">
								<label class="fl fs16 darkgray">支付平台支付</label>
								<a href="javascript:" class="check-inline ml10"><span><img src="img/cft.jpg"/></span><em></em></a>
								<a href="javascript:" class="check-inline ml10" id="zfb"><span><img src="img/zfb.jpg" /></span><em></em></a>
							</div>
							<div class="bank-check line-bot pt30 pb30 clearfix xz">
								<label class="fl fs16 darkgray">网银在线支付</label>
								<div class="fl bank-list clearfix">
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/zh.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/gh.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/jh.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/chinaback.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/yz.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/gf.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/pf.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/ms.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/bh.jpg"></span><em></em></a>
									<a href="javascript:" class="check-inline ml10 mb10"><span><img src="img/bank/zx.jpg"></span><em></em></a>
								</div>
							</div>
							<div class="next go-pay pt30 clearfix">
							
							
								<input type="button" class="radius3 orange-but fs20" value="立即支付" onclick="ljzf();">
							</div>
						</form>
					</div>

				</div>

			</div>
		</div>
		<!--/end-->
		<script type="text/javascript">
		$(function(){
			
			
		});
		
		
		
		
		
		function ljzf(){
			location.href="fukuanchenggong.jsp";
		}
		
		// 支付方式仅能选择其中一项
		$(document).ready(function(){
			$("#xq").click(function(){
			  $(this).siblings().removeClass("show-on");
			  if($(this).hasClass("show-on")){
			   $(this).removeClass("show-on");
			   $(".order-show").hide();
			  }else{
			   $(this).addClass("show-on");
			   $(".order-show").show();
				  }

			})
			  $(".check-inline").click(function(){
				  $(this).addClass("check_on");	
				  if($(this).parents(".xz").siblings().find("a").hasClass("check_on")) {
						$(this).parents(".xz").siblings().find("a").removeClass("check_on");
					}
				  if($(this).siblings().hasClass("check_on")){
						$(this).siblings().removeClass("check_on");
					}
			  });
			});
		</script>
		<!--footer star-->
		<div class="footer clearfix">
			<div class="content clearfix">
				<div class="top clearfix">
					<div class="list clearfix fl box-s">
						<div class="part icon1 box-s">
							<h3>专业</h3>
							<p>拥有资深游戏顾问和先进交易平台，安全交易，快捷支付。</p>
						</div>
					</div>
					<div class="list clearfix fl box-s">
						<div class="part icon2 box-s">
							<h3>保真</h3>
							<p>阵容强大的游戏评鉴团，确保平台上的游戏货真价实。</p>
						</div>
					</div>
					<div class="list clearfix fl box-s">
						<div class="part icon3 box-s">
							<h3>保值</h3>
							<p>为您精选具备收藏价值的游戏作品，助您的资产保值、增值。</p>
						</div>
					</div>
				</div>
				<div class="bottom clearfix">
					<div class="left clearfix fl">
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>新手指南</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="scgmlc.html">购买流程</a></li>
									<li><a href="cjwt.html">常见问题</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>账户管理</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="zhcz.html">账户充值</a></li>
									<li><a href="zhtx.html">账户提现</a></li>
									<li><a href="zffs.html">支付方式</a></li>
								</ul>
							</div>
						</div>						
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>服务合作</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="friend-link.html">友情链接</a></li>
									<li><a href="ysjrz.html">玩家入驻</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>关于我们</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="gsjj.html">公司简介</a></li>
									<li><a href="contact.html">联系我们</a></li>
									<li><a href="jrwm.html">加入我们</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>售后服务</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="wlsm.html">交易说明</a></li>
									<li><a href="mzsm.html">免责声明</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="middle clearfix fl">
						<ul>
							<li><img src="upload/ewm.jpg"/></li>
							<li><img src="upload/ewm.jpg"/></li>
						</ul>
					</div>
					<div class="right clearfix fr">
						<p class="bt">免费咨询热线：</p>
						<p class="tel">400-000-0000</p>
						<p class="fu-bt">(周一到周五8:00-22:00)</p>
					</div>
				</div>
			</div>
			<div class="banquan clearfix ta-center">
				Copyright © 2021 厦门游戏商城(xiamenyouxishangcheng). All Rights Reserved. 
			</div>
		</div>
		<!--footer end-->
		<!-- 下面是跳转支付 -->
		<form name=alipayment action=alipay.trade.page.pay.jsp method=post target="_blank">
				<div id="body1" class="show" name="divcontent">
					<dl class="content">
						<dt><!-- 商户订单号 ： --></dt>
						<dd>
							<input type="hidden" id="WIDout_trade_no" name="WIDout_trade_no" value=""/>
						</dd>
						
						<dt><!-- 订单名称 ： --></dt>
						<dd>
							<input type="hidden" id="WIDsubject" name="WIDsubject" value="测试"/>
						</dd>
						
						<dt><!-- 付款金额 ： --></dt>
						<dd>
							<input type="hidden" id="WIDtotal_amount" name="WIDtotal_amount" value=""/>
						</dd>
					
						<dt><!-- 商品描述： --></dt>
						<dd>
							<input type="hidden" id="WIDbody" name="WIDbody" value="游戏"/>
						</dd>
						<dd>
							<input type="hidden" id="orderNo1" name="orderNo1" value=""/>
						</dd>
						<dd>
							<input type="hidden" id="orderNo2" name="orderNo2" value=""/>
						</dd>
						<dt></dt>
						<dd id="btn-dd">
							<span class="new-btn-login-sp">
								<button class="new-btn-login" type="submit" style="text-align: center;position: absolute;right: 181px;top: 1161px;width: 202px;height: 54px;opacity: 0;">付 款</button>
							</span> <span class="note-help"></span>
						</dd>
					</dl>
				</div>
			</form>	
		<!-- 上面是跳转支付 -->
		<script>
	
		
		$(function(){
			/* 在支付之前检测是否选择支付宝 */
			$("button[type='submit']").click(function(){
				if($("#zfb").hasClass("check_on")){
					$('form').submit();
					window.close();
				}else{
					alert("请选择支付宝");
					return false;
				}
			});
			
			
			
			
			
			
			
			
			
			
		});
		
		</script>
		
		<script type="text/javascript">
		$(function(){
			
				
				
			
		});
		/* 订单支付超时取消该订单并返回首页 */
		
		let orderNo1 = ${param.orderNo1}+"";
		let orderNo2 = ${param.orderNo2}+"";
		let orderNo = orderNo1+orderNo2;
		/* setTimeout(function(){ o(orderNo); }, 5000); */
		function o(orderNo){
			
			$.ajax({
				async:true,
				type:"GET",
				url:"../OrderServlet",
				data:{
					op:"findOrderInfoByOrderNo",
					orderNo:orderNo
				},
				contentType:"application/x-www-form-urlencoded",
				dataType:"json",
				success:function(result,status,xhr){
					if(result.status==1){
						let orderInfoStatus = result.data.status;
						if(orderInfoStatus=="0"){
							alert("由于您在5s内未进行支付操作，认定支付超时，订单已为您自动取消，并跳转首页");
							/* 调用方法设置订单支付状态为支付超时 */
							
							
							location.href="index.jsp";
							window.close();
						}
					}
				},
					
			});
		}
		//调用定时任务
        i = self.setInterval("countdown()",1000);
        let int = 30;
		function countdown() {
			if(int>=0){
				document.getElementById("time").innerHTML = int+"s";
			}
	        if(int==-1){
	            i=window.clearInterval(i);
	            alert("由于您在30s内未进行支付操作，认定支付超时，订单已为您自动取消，并跳转首页");
				/* 调用方法设置订单支付状态为支付超时 */
				/* 更改订单的状态为支付超时 */
				$.ajax({
					async:true,
					type:"GET",
					url:"../OrderServlet",
					data:{
						op:"updateOrderInfoStatus",
						status:"2",
						orderNo:orderNo
					},
					contentType:"application/x-www-form-urlencoded",
					dataType:"json",
					success:function(result,status,xhr){
						if(result.status==1){
							// 更改支付超时成功
						}
						
					},
					
				});
				/* 跳转主页 */
				location.href="index.jsp";
				window.close();
	        }
	        int--;
		}
	
		
		
		</script>
		
	</body>
	
	
	
	
	<script src="js/other.js" type="text/javascript" ></script>
	
</html>